<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText "></block>
			<block slot="content">
				<text v-if="type == 2">申请通知</text>
				<text v-else-if="type == 10">系统通知</text>
			</block>
		</cu-custom>
		<view v-for="(item,index) in list" :key='index'>
			<!-- 系统通知 -->
			<block v-if="type==10">
				<view class="text_notification">
					<view>
						<view style="display: flex;">
							<view class="title">{{item.nickname}}</view>
							<view class="first_time">{{timeToStr(item.add_time,'MM/dd hh:mm')}}</view>
						</view>
						<view class="txt">{{item.content}}</view>
					</view>
				</view>
			</block>
			<!-- <view v-if="item.nickname == '' && type==10">暂无通知</view> -->
			<!-- 申请合作通知 -->
			<view v-else-if="type==2" class="sch_notifi">
				<view class="title2">
					<view class="tit">合作申请</view>
					<view class="time">{{timeToStr(item.add_time,'yyyy/MM/dd hh:mm')}}</view>
				</view>
				<view class="text">
					<view style="width: 100rpx;">
						<view class="avatar">{{item.nickname[0]}}</view>
					</view>
					<view style="left: 200rpx; height: 100rpx;margin-top: 10rpx; position: absolute;">
						<view class="sch_name tit" @click="com_info(item.company_id)">{{item.nickname}}</view>
						<view class="sch_txt"> {{item.content}}</view>
					</view>
				</view>
				<view style="height: 95rpx;position: relative;">
					<!-- 没有处理时显示 -->
					<view style="display: flex;bottom: 30rpx; margin-top: 30rpx; position: absolute;right: 40rpx;" v-if="item.is_active == 0">
						<button class="refuse" @tap="showModal1(item.notice_id)" data-target="DialogModal1">拒绝</button>
						<button class="agreed" @tap="showModal2(item.notice_id)" data-target="DialogModal2">同意</button>
					</view>
					<!-- 处理以后显示 -->
					<view style="position: absolute;right: 40rpx;" v-if="item.is_active !== 0">
						<button class="agreed">{{item.active_text}}</button>
					</view>
				</view>
				<!-- <view v-if="item.nickname==null && type==2">暂无通知</view> -->
			</view>
		</view>

		<!-- 同意弹框 -->
		<view class="cu-modal" :class="modalName=='DialogModal2'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">同意申请</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl" style="background-color: #FFFFFF;font-size: 30rpx;">
					是否同意申请
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="agreed_submit()">确定</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 拒绝弹框 -->
		<view class="cu-modal" :class="modalName=='DialogModal1'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">拒绝理由</view>
					<view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl" style="background-color: #FFFFFF;font-size: 30rpx;">
					<textarea v-model="active_feedback" placeholder="请输入拒绝理由"></textarea>
				</view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn line-green text-green" @tap="hideModal">取消</button>
						<button class="cu-btn bg-green margin-left" @tap="refuse_submit()">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	const {
		appLogin,
		httpGet,
		httpPost,
		timeToStr
	} = require("@/utils/common.js")
	export default {
		data() {
			return {
				page: 1,
				page_size: 5,
				list: [],
				type: '',
				modalName: null,
				active_feedback: '',
				refuse_active: -1,
				agreed_active: 1,
				notice_id: '',
				ractive_feedback: '同意',
				timeToStr: timeToStr,
				company_id: ''
			}
		},
		onLoad(option) {
			appLogin((user_info) => {
				this.type = option.type
				this.getinfo()
				console.log(option)
			})
		},
		onReachBottom() {
			this.page++
			this.getinfo()
			console.log(111)
		},
		methods: {
			showModal1(notice_id) {
				this.active_feedback = ''
				this.notice_id = notice_id
				this.modalName = 'DialogModal1'
			},
			showModal2(notice_id) {
				this.notice_id = notice_id
				this.modalName = 'DialogModal2'
			},
			hideModal(e) {
				this.modalName = null
			},
			// 弹框中拒绝按钮
			refuse_submit() {
				if (!this.active_feedback) {
					uni.showToast({
						title: '请输入拒绝理由',
						icon: 'none',
						duration: 2000
					});
					return;
				}
				httpPost({
					url: "/api/school/notice_handle",
					data: {
						notice_id: this.notice_id,
						active_feedback: this.active_feedback,
						active: this.refuse_active
					},
				}).then((res) => {
					console.log(res)
					this.hideModal()
					this.list = null
					this.getinfo()
				})


			},
			// 同意申请按钮
			agreed_submit() {
				httpPost({
					url: "/api/school/notice_handle",
					data: {
						notice_id: this.notice_id,
						// active_feedback: this.ractive_feedback,
						active: 1
					},
				}).then((res) => {
					console.log(res)
					this.hideModal()
					this.list = null
					this.getinfo()
				})
			},
			// 点击跳到企业详情
			com_info(company_id) {
				uni.navigateTo({
					url: 'enterprise?company_id=' + company_id
				})
				console.log(company_id)
			},
			getinfo() {
				httpGet({
					url: '/api/school/notice_list',
					data: {
						page: this.page,
						page_size: this.page_size,
						type: this.type,
					}
				}).then((res) => {
					console.log(res)
					console.log(222)
					this.list = this.list.concat(res.result.list)
				})
			}
		}
	}
</script>

<style>
	/* 系统通知 */
	.first_time {
		/* height: 85rpx; */
		position: absolute;
		margin-top: 50rpx;
		right: 50rpx;
		color: rgb(153, 153, 153);
		font-size: 26rpx;
		text-align: center;
		/* line-height: 85rpx; */
	}

	.text_notification {
		padding-bottom: 60rpx;
		width: 700rpx;
		height: auto;
		margin-top: 30rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 26rpx;
	}

	.title {
		position: relative;
		top: 45rpx;
		margin-left: 26rpx;
		color: rgb(38, 38, 38);
		font-size: 28rpx;
		font-weight: 600;
	}

	.txt {
		margin-left: 26rpx;
		margin-top: 65rpx;
		color: rgb(102, 102, 102);
		font-size: 26rpx;
	}

	/* 申请合作通知 */
	.text {
		display: flex;
		width: 700rpx;
		padding-bottom: 85rpx;
		margin-top: 34rpx;
		margin-left: 30rpx;
	}

	.sch_notifi {
		/* height: auto; */
		/* padding-bottom: 120rpx; */
		width: 700rpx;
		margin-top: 28rpx;
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-left: 26rpx;
	}

	.title2 {
		height: 80rpx;
		font-weight: 700;
		line-height: 80rpx;
		margin-left: 26rpx;
		display: flex;
		box-shadow: rgb(246, 246, 246) 1rpx solid;
		background-color: #FFFFFF;
	}

	.tit {
		color: rgb(38, 38, 38);
		font-size: 28rpx;
		font-weight: 600;
	}

	.time {
		position: absolute;
		color: rgb(153, 153, 153);
		font-size: 26rpx;
		right: 60rpx;
	}

	.ava_txt {
		/* 		position: relative;
		display: flex;
		margin-top: 34rpx;
		margin-left: 30rpx; */
	}

	.avatar {
		width: 100rpx;
		/* height: 100rpx; */
		border-radius: 50%;
		background-color: #1CBBB4;
		text-align: center;
		line-height: 100rpx;
		color: #FFFFFF;
		font-size: 36rpx;
	}

	.sch_txt {
		/* position: absolute; */
		color: rgb(153, 153, 153);
		font-size: 26rpx;
		width: 500rpx;
		margin-top: 15rpx;
	}

	.refuse {
		width: 162rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 30rpx;
		border: rgb(191, 191, 191) 1rpx solid;
		color: rgb(153, 153, 153);
		font-size: 24rpx;
		margin-right: 20rpx;
	}

	.agreed {
		border: 1rpx solid;
		width: 162rpx;
		height: 56rpx;
		line-height: 56rpx;
		border-radius: 30rpx;
		background-color: #FFFFFF;
		color: grey;
		font-size: 24rpx;
	}
</style>
